import { Component, createContext, useContext } from 'react';
import './02-useContext.css';

// 创建 Context
const ThemeContext = createContext();

const Node = () => (
  <div className="node">
    Node
    <SubNode />
  </div>
);
const SubNode = () => {
  const value = useContext(ThemeContext);
  return (
    <div className="sub-node">
      SubNode
      {value}
      <Child />
    </div>
  );
};
// 消费数据
const Child = () => {
  const value = useContext(ThemeContext);
  return (
    <div className="child">
      <h1>Child</h1>
      {value}
      <ThemeContext.Consumer>{(value) => value}</ThemeContext.Consumer>
    </div>
  );
};

export class App extends Component {
  render() {
    return (
      <ThemeContext.Provider value={'xxx'}>
        <div className="app">
          <h1>我是App组件</h1>
          <Node />
        </div>
      </ThemeContext.Provider>
    );
  }
}
